<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>

<body>
    <!-- form 标签用于定义表单，action 属性指定表单提交的地址，这里暂时设为 "#" 表示不进行实际提交，method 属性设置提交方法为 "get"（也可以是 "post"） -->
    <form action="#" method="get">
        <!-- 文本输入框，用于输入单行文本，name 属性用于在表单提交时标识该字段 -->
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <br>
        <!-- 密码输入框，输入的文本会以掩码形式显示，如星号，同样 name 属性用于标识 -->
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <!-- 单选按钮，多个单选按钮如果 name 属性相同，则只能选择其中一个，value 属性是提交的值 -->
        <label for="gender_male">男</label>
        <input type="radio" id="gender_male" name="gender" value="male">
        <label for="gender_female">女</label>
        <input type="radio" id="gender_female" name="gender" value="female">
        <br>
        <!-- 复选框，可选择多个，name 和 value 属性作用与其他表单元素类似 -->
        <label for="hobby_reading">阅读</label>
        <input type="checkbox" id="hobby_reading" name="hobby" value="reading">
        <label for="hobby_sports">运动</label>
        <input type="checkbox" id="hobby_sports" name="hobby" value="sports">
        <br>
        <!-- 下拉列表，通过 option 标签定义选项，selected 属性可设置默认选中项 -->
        <label for="city">城市：</label>
        <select id="city" name="city">
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <option value="guangzhou">广州</option>
        </select>
        <br>
        <!-- 文本域，用于输入多行文本，rows 和 cols 属性分别设置行数和列数 -->
        <label for="description">个人描述：</label>
        <textarea id="description" name="description" rows="4" cols="30"></textarea>
        <br>
        <!-- 提交按钮，用于提交表单数据 -->
        <input type="submit" value="提交">
        <!-- 重置按钮，用于重置表单所有字段为初始状态 -->
        <input type="reset" value="重置">
    </form>
</body>

</html>